<template>
  <div>
    <div class="updateBind">
      <div class="title">
        <h3 style="font-weight: bold">招标项目编辑</h3>

        <el-row class="display-box">
          <el-col :span="4" class="headcol">招标项目编号</el-col>
          <el-col :span="8" class="headcols">
            <el-input
              v-model="bind.bindCode"
              readonly
              style="margin-left: 5px"
            ></el-input>
          </el-col>

          <el-col :span="4" class="headcol">招标项目名称</el-col>
          <el-col :span="8" class="headcols">
            <el-input
              v-model="bind.bindName"
              readonly
              style="margin-left: 5px"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="headcol">招标方式</el-col>
          <el-col :span="8" class="headcols">
            <div>
              <dict-tag
                class="dict-box"
                :options="dict.type.pur_methods"
                :value="bind.bindMethod"
              />
            </div>
          </el-col>
          <el-col :span="4" class="headcol">是否必招</el-col>
          <el-col :span="8" class="headcols">
            <el-radio v-model="bind.isMust" label="1" style="margin-left: 20px"
              >依法必招</el-radio
            >
            <el-radio v-model="bind.isMust" label="2">自主招标</el-radio>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="headcol">资格审查方式</el-col>
          <el-col :span="8" class="headcols">
            <el-radio
              v-model="bind.examMethod"
              label="1"
              style="margin-left: 20px"
              >资格预审</el-radio
            >
            <el-radio v-model="bind.examMethod" label="2">资格后审</el-radio>
          </el-col>
          <el-col :span="4" class="headcol">业务类型</el-col>
          <el-col :span="8" class="headcols">
            <dict-tag
              style="margin-left: 15px"
              :options="dict.type.business_type"
              :value="bind.busiType"
            />
          </el-col>
        </el-row>
        <el-row class="display-box">
          <el-col :span="4" class="headcol">招标单位</el-col>
          <el-col :span="8" class="headcols">
            <el-input
              v-model="bind.bindUnit"
              style="margin-left: 5px"
            ></el-input>
          </el-col>
          <el-col :span="4" class="headcol">联系人</el-col>
          <el-col :span="8" class="headcols">
            <el-input
              v-model="bind.bindPerson"
              style="margin-left: 5px"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="display-box">
          <el-col :span="4" class="headcol">电话</el-col>
          <el-col :span="8" class="headcols">
            <el-input v-model="bind.phone" style="margin-left: 5px"></el-input>
          </el-col>
          <el-col :span="4" class="headcol">邮箱</el-col>
          <el-col :span="8" class="headcols">
            <el-input v-model="bind.email" style="margin-left: 5px"></el-input>
          </el-col>
        </el-row>

        <el-row class="display-box">
          <el-col :span="4" class="headcol">地址</el-col>
          <el-col :span="20" class="headcols">
            <el-input v-model="bind.binderAddr"></el-input>
          </el-col>
        </el-row>
        <el-row class="display-box">
          <el-col :span="4" class="headcol">相关附件</el-col>
          <el-col :span="20" class="headcols" style="position: relative">
            <FileUpload
              :syncedMessage.sync="fileInfo"
              style="margin-left: 10px"
              ref="childrenFile"
            ></FileUpload>
          </el-col>
        </el-row>
      </div>
      <div class="budGetInfos-box">
        <div style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
          <em>预算信息</em>
        </div>
        <el-table :data="budgetList" border style="width: 1000px;margin-left: 20px;">
          <el-table-column label="预算编号" align="center" prop="bgId" >
            <template slot-scope="scope">
            <div style="font-family: '毛笔体';">{{ scope.row.bgId  }}</div>
          </template>
          </el-table-column>
          <el-table-column label="部门名称" align="center" prop="createPost" />
          <el-table-column
            label="预算名称"
            align="center"
            prop="bgName"
            width="170px"
          />

          <el-table-column label="总金额" align="center" prop="totalAmount" >
            <template slot-scope="scope">
              <div style="font-family: '毛笔体';">{{  scope.row.totalAmount  }}</div>
            </template>
          </el-table-column>

          <el-table-column label="已使用金额" align="center" prop="useMoney" >
            <template slot-scope="scope">
              <div style="font-family: '毛笔体';">{{  scope.row.useMoney  }}</div>
            </template>
          </el-table-column>
          <el-table-column label="剩余金额" align="center" prop="surpMoney" >
            <template slot-scope="scope">
              <div style="font-family: '毛笔体';">{{  scope.row.surpMoney  }}</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="budGetqueryParams.pageNum"
          :limit.sync="budGetqueryParams.pageSize"
          @pagination="getBudGetList"
        />
      </div>

      <div class="planInfos-box">
        <div style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
          <em>产品明细</em>
        </div>
        <el-table :data="planInfoList" style="width: 100%" border>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="税率">
                  <span style="font-family: '毛笔体';">{{ props.row.taxRate + "%" }}</span>
                </el-form-item>
                <el-form-item label="预算总价">
                  <span style="font-family: '毛笔体';">{{ props.row.bdgTotlePrice + "元" }}</span>
                </el-form-item>
                <el-form-item label="交付时间">
                  <span style="font-family: '毛笔体';">{{ props.row.delvTime }}</span>
                </el-form-item>
                <el-form-item label="需求说明">
                  <span>{{ props.row.prodExplain }}</span>
                </el-form-item>
                <el-form-item label="采购人">
                  <span>{{ props.row.purchaser }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="预算编号"
            align="center"
            prop="bgId"
            width="200"
          >
          <template slot-scope="scope">
            <div style="font-family: '毛笔体';">{{ scope.row.bgId  }}</div>
          </template>
        </el-table-column>
          <el-table-column
            label="产品编号"
            align="center"
            prop="prodId"
            width="200"
          />
          <el-table-column
            label="产品名称"
            align="center"
            prop="prodName"
            width="200"
          />
          <el-table-column
            label="规格"
            align="center"
            prop="size"
            width="120"
          />
          <el-table-column
            label="预算单价"
            align="center"
            prop="bdgSinglePrice"
            width="120"
          >
          <template slot-scope="scope">
            <div style="font-family: '毛笔体';">{{ scope.row.bdgSinglePrice  }}</div>
          </template>
        </el-table-column>
          <el-table-column label="需求数量" align="center" prop="reqNumber" width="140" >
            <template slot-scope="scope">
            <div style="font-family: '毛笔体';">{{ scope.row.reqNumber  }}</div>
          </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="planInfoTotal > 0"
          :total="planInfoTotal"
          :page.sync="planInfoqueryParams.pageNum"
          :limit.sync="planInfoqueryParams.pageSize"
          @pagination="getPlanInfoList"
        />
      </div>

    </div>
  </div>
</template>

<script>
import { updateBind } from "@/api/purs/bind";
import { getPlanDetails, deleteFile, getPurCode } from "@/api/purs/purs";
import { budList, listBudget } from "@/api/budget/budget";
import { getPlanInfoListByBindCode } from "@/api/purs/planInfo";
import bindNoticeVue from "@/components/Bind/bindNotice";
import bindFile from "@/components/Bind/bindFiles";
import getBindFile from "@/components/Bind/getBindFile";
import committee from "@/components/Bind/committee";
import evaluation from "@/components/Bind/evaluation";

import calibrate from "@/components/Bind/calibrate";
import {
  addBindFiles,
  delBindFiles,
  listBindFiles,
  delBindFilesByFileName,
} from "@/api/purs/bindFiles";
import axios from "axios";

export default {
  dicts: ["pur_methods", "pur_bind_status", "business_type"],
  props: {
    bind: {
      type: Object,
    },
  },
  components: {
    bindNoticeVue: bindNoticeVue,
    bindFile: bindFile,
    getBindFile: getBindFile,
    committee: committee,
    evaluation: evaluation,
    calibrate: calibrate,
  },
  data() {
    return {
      committeeActiveName: "committee",
      getFileActiveName: "getFile",
      activeName: "first",
      bindActiveName: "bind_project",
      fileInfo: {},
      bindCode: "",
      sendBind: { incry: 1 },
      bind: {},
      budgetList: [],
      planInfoList: [],
      planInfoTotal: 1,
      mapData: [],
      total: 1,
      budGetqueryParams: {
        pageNum: 1,
        pageSize: 10,
        planCode: null,
      },
      planInfoqueryParams: {
        pageNum: 1,
        pageSize: 10,
        planCode: null,
      },
      bindFile: {},
      uploadFlag: true,
      myFileList: [],
    };
  },

  watch: {
    fileInfo: {
      handler(value) {
        if (value.code == 1) {
          this.bindFile.fileName = value.fileName;
          this.bindFile.filePath = value.filePath;
          this.bindFile.type = 1;
          this.bindFile.fileSize = parseFloat(value.fileSize / 1000);
          this.bindFile.creater = sessionStorage.getItem("userName");
          this.bindFile.bindCode = this.bindCode;
          // console.log("bindCode:" + JSON.stringify(this.bindFile));
          addBindFiles(this.bindFile).then((res) => {
            if (res.code == 200) {
              this.uploadFlag = false;
              this.$modal.msgSuccess("上传成功");
            }
          });
        } else if (value.code == 2) {
          //删除文件
          deleteFile(this.bindFile.fileName).then();
          delBindFilesByFileName(this.bindFile.fileName).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("删除成功");
            }
          });
        } else {
          //删除文件
          this.bindFile.fileName = value.name;
          deleteFile(this.bindFile.fileName).then();
          delBindFilesByFileName(this.bindFile.fileName).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("删除成功");
            }
          });
        }
      },
    },
  },
  created() {
    this.bind = this.bind;
    this.fileInfo.id = this.bind.bindCode;
    this.bindCode = this.bind.bindCode;
    this.bindFile.bindCode = this.bindCode;
    this.sendBind = this.bind;
    let queryObj = {};
    queryObj.bindCode = this.bindCode;
    queryObj.type = 1;
    listBindFiles(queryObj).then((res) => {
      res.rows.forEach((item) => {
        let obj = {};
        obj.url = item.filePath;
        obj.name = item.fileName;
        obj.id = item.fileId;
        obj.code = 3;
        this.myFileList.push(obj);
      });
      this.$refs.childrenFile.test(this.myFileList);
    });
    this.budGetqueryParams.planCode = this.bindCode;
    if (this.bindCode != null) {
      this.getBindDetails();
    }
  },
  methods: {
    //招标
    handleOpenBindClick(tab, event) {
      console.log(tab, event);
    },

    handleClick(tab, event) {
      // console.log(tab, event);
    },
    back() {
      this.$router.back();
    },

    getPlanInfoList() {
      getPlanInfoListByBindCode(this.bindCode).then((res) => {
        this.planInfoTotal = res.total;
        this.planInfoList = res.rows;
      });
    },

    getBudGetList() {
      listBudget(this.budGetqueryParams).then((res) => {
        this.budgetList = res.rows;
        this.total = res.total;
      });
    },

    getBindDetails() {
      getPlanDetails(this.bindCode).then((res) => {
        this.budgetList = res.data.purProdBudget;
        this.planInfoList = [];
        res.data.purProdBudget.forEach((res) => {
          res.purProdInfos.forEach((item) => {
            this.planInfoList.push(item);
          });
        });
      });
    },
  },
};
</script>

<style>
.bindDetails-box {
  overflow: auto;
}

.el-tabs::v-deep .el-tabs__item.is-active {
  color: #409eff; /* 修改激活时的字体颜色 */
}

.el-select-dropdown .el-select-dropdown__item {
  /* 设置字体颜色为黑色 (#333) */
  color: #409eff; /* 修改激活时的字体颜色 */
  font-weight: bold;
}

.head-box .el-tabs__active-bar {
  background-color: black;
  display: none;
}

.bindDetails-box .el-tabs__active-bar {
  display: none;
}




.header-box {
  height: 30px;
  background-color: #ccc;
  line-height: 30px;
  font-family: "仿宋";
  font-size: 18px;
  font-weight: bold;
  text-indent: 30px;
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

.title {
  width: 90%;
  margin: 0 auto;
}

.headcol {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  background-color: #f2f2f2;
  color: rgb(133, 125, 125);
  text-align: center;
}

.headcols {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border: 1px solid #f3f3f3;
  font-weight: bold;
}

.display-box .el-input input {
  border: none;
  outline: none;
  box-shadow: none;
}
.updateBind .el-input__inner {
  background-color: inherit; /* 继承父级背景色，或设置成你需要的颜色 */
  color: black;
}

.el-radio {
  color: black;
}

.tilte-style {
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
}

.budGetInfos-box {
  width: 1100px;
  margin: 120px auto;
}

.planInfos-box {
  width: 1100px;
  margin: 60px auto;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 20px;
  width: 50%;
}

.submit-box {
  width: 1100px;
  height: 100px;
  margin: 20px auto;
}

.dict-box {
  background-color: inherit; /* 继承父级背景色，或设置成你需要的颜色 */
  font-family: "仿宋";
  font-weight: bold;
  margin-left: 15px;
  font-size: 14px;
}

.el-select-dropdown {
  border: 1px solid #48e3ff;
}

.map-box {
  font-family: "仿宋";
  font-weight: bold;
  font-size: 15px;
  margin-left: 15px;
}
.updateBind {
  overflow: auto;
}
</style>